<script setup lang="ts">

// 用户信息列表
import {useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {showFailToast, showSuccessToast} from "vant";
import {getCurrentUser} from "../services/user.ts";

// const user = {
//   id: 9527,
//   username: 'shangyu',
//   userAccount: "931",
//   avatarUrl: 'https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg',
//   gender: '男',
//   phone: '2131232',
//   email: 'shayu-yu@qq.com',
//   planetCode: '123123',
//   createTime: new Date(),
//
// };

const user = ref();

// 获取路由实例
const router = useRouter();


onMounted(async () => {
  const res = await getCurrentUser();
  if (res) {
    user.value = res;
    showSuccessToast("获取用户信息成功");
  } else {
    showFailToast("获取用户信息失败");
  }
})

/**
 * 跳转到编辑页面
 * @param editKey 编辑的字段名
 * @param editName 编辑的字段中文名
 * @param currentValue 当前值
 */
const toEdit = (editKey: string, editName: string, currentValue: string) => {
  /**
   * 使用 router.push 方法进行路由跳转
   * 跳转到路径 /user/edit (用户编辑页面)
   * 通过 query 对象传递三个参数作为 URL 查询参数
   * 例如跳转后的 URL 可能是: /user/edit?editKey=xxx&editName=xxx&currentValue=xxx
   */
  router.push({
    path: '/user/edit',
    query: {
      editKey,
      editName,
      currentValue
    }
  });
};


</script>
<template>
<!-- 注意从后端请求获取user要在这加上if,且template-->
  <template v-if="user">
    <!--  用户信息单元格展示 -->
    <van-cell title="昵称" is-link to="/user/edit" :value="user.username"
              @click="toEdit('username','昵称',user.username)"/>
    <van-cell title="账户" :value="user.userAccount"/>
    <van-cell title="头像" is-link to="/user/edit">
      <!--    头像加载出来为圆形 -->
      <img style="height: 48px; width: 48px; border-radius: 50%" :src="user.avatarUrl"/>
    </van-cell>

    <van-cell title="性别" is-link to="/user/edit" :value="user.gender" @click="toEdit('gender','性别',user.gender)"/>
    <van-cell title="电话" is-link to="/user/edit" :value="user.phone" @click="toEdit('phone','电话',user.phone)"/>
    <van-cell title="邮箱" is-link to="/user/edit" :value="user.email" @click="toEdit('email','邮件',user.email)"/>
    <van-cell title="星球编号" :value="user.planetCode"/>
    <!-- 注册时间显示，将 Date 对象转换为本地时间字符串格式 -->
    <van-cell title="注册时间" :value="user.createTime.toLocaleString()"/>

  </template>
</template>
<style scoped>


</style>